<template>
  <div>
    <el-card class="search-card">
      <BasicForm
        ref="formData"
        :formColumns="formItems"
        :dataSource="formData"
        :handleSearchForm="handleQueryForm"
        @getFormData="getFormData"
      />
    </el-card>
    <el-card class="table-card">
      <skus-table
        ref="skusTable"
        showActionCol
        showPagination
        :tableHeight="480"
        :defaultMinWidth="100"
        :dataSource="TableInfo.list"
        :columns="TableInfo.columns"
        :loading="TableInfo.loading"
        :pageSizes="pageSizes"
        :pagination="pagination"
        :total="pagination.total"
        :actionRender="renderTableBtnAction"
        @pageChange="handlePageChange"
        @pageSizeSelect="handlePageSizeChange"
      >
        <!-- 按钮操作栏 -->
        <BtnRender slot="content_context" :render="renderBtnsBar" />
      </skus-table>
    </el-card>
    <AllLevelMultipleSelect
      :visible.sync="multipleSelect.visible"
      :on-confirm="fetchSubmitAssociateCate"
      :on-echo="fetchGetCateList"
    />
  </div>
</template>
<script>
import BasicForm from '@/components/BasicForm';
import SkusTable from '@/components/skusTable';
import BtnRender from '@/components/JSXRender/BtnRender';
import AllLevelMultipleSelect from '@/components/Category/AllLevelMultipleSelect';
import { getInitFormData, TableInfo } from '@/utils/getUtils';
import { getListPageBtnsBar, getTableAction } from '@/utils/getBtnsRender';
import { setAuthBtnId, handleOpenNewPage } from '@/utils/bizUtils';
import skusPage from '@/mixins/commodity/skusPage';
import { FORM_ITEMS, TABLE_COLUMNS } from './constants/list';
import {
  categoryLabelSearchService,
  categoryLabelSaveService,
  nonPagedQueryService,
} from '@/api/basics/categoryManage/categoryLabelManage';
export default {
  mixins: [skusPage],
  components: {
    BasicForm,
    SkusTable,
    BtnRender,
    AllLevelMultipleSelect,
  },
  data () {
    return {
      formItems: FORM_ITEMS,
      formData: getInitFormData(FORM_ITEMS),
      TableInfo: new TableInfo({ columns: TABLE_COLUMNS }),
      pageSizes: [10, 100, 1000],
      multipleSelect: {
        visible: false, // 多选弹窗显示隐藏
        labelUuid: '', // 当前点击标签uuid
      }
    }
  },
  mounted () {
    this.getTableData()
  },
  methods: {
    // 渲染按钮操作栏
    renderBtnsBar (h) {
      const btnBars = [
        {
          label: '新增',
          method: this.handleAdd,
          icon: 'el-icon-plus',
          hasAuth: true
        }
      ]
      return getListPageBtnsBar(h, btnBars, this.showBtn, 'start')
    },
    // 渲染表格操作栏按钮
    renderTableBtnAction (h, { row }) {
      const canRel = row.canRelFlag == '1'
      const actionList = [
        {
          label: '编辑',
          method: this.handleEdit,
          hasAuth: true
        },
        canRel && {
          label: '关联品类',
          method: this.handleAssociateCate,
          hasAuth: true,
          authLabel: '关联分类'
        },
        canRel && {
          label: '查看关联品类',
          method: this.handleViewCate
        }
      ].filter(item => item)
      return getTableAction({ h, row, actionList, showBtn: this.showBtn })
    },
    // 获取表格数据
    async getTableData () {
      setAuthBtnId('查询')
      const data = {
        ...this.formData,
        ...this.paginationParams,
      }
      const res = await categoryLabelSearchService(data, this.TableInfo.setLoading)
      if (res?.retData) {
        this.TableInfo.setList(res.retData.results)
        this.setTotalNum(res.retData.totalNum)
      }
    },
    // 新增
    handleAdd () {
      setAuthBtnId('新增')
      this.$router.push({ name: 'categoryLabelManageAdd' })
    },
    // 编辑
    handleEdit (row) {
      setAuthBtnId('编辑')
      this.$router.push({
        name: 'categoryLabelManageEdit',
        params: _.pick(row, ['uuid', 'name', 'parentUuid', 'description', 'enableState']),
      })
    },
    // 关联品类
    handleAssociateCate (row) {
      setAuthBtnId('关联分类')
      this.multipleSelect.visible = true
      this.multipleSelect.labelUuid = row.uuid
    },
    // 查看关联品类
    handleViewCate (row) {
      handleOpenNewPage(this, {
        name: 'categoryLabelManageView',
        query: {
          uuid: row.uuid,
          name: row.name,
        }
      })
    },
    // 提交关联品类
    async fetchSubmitAssociateCate (cateList, loadingFn) {
      const categoryParams = cateList.map(item => _.pick(item, ['categoryUuid', 'levelNum']))
      const data = {
        labelUuid: this.multipleSelect.labelUuid,
        categoryParams
      }
      const res = await categoryLabelSaveService(data, loadingFn)
      return res
    },
    // 获取当前品类标签已关联品类集合
    async fetchGetCateList (loadingFn) {
      const data = {
        labelUuid: this.multipleSelect.labelUuid,
      }
      const res = await nonPagedQueryService(data, loadingFn)
      return res
    },
  }
}
</script>
